<template>
  <a-modal :visible="visible" title="本次登录需要验证码" @ok="handleOk" @cancel="handleCancel">
    <img @click="generatePictureCptcha" :src="pictureCaptchaImage" alt="picture captcha">
    <a-input v-model:value="pictureCaptchaTicket.code" placeholder="请输入内容" />
  </a-modal>
</template>

<script setup>
import { ref } from 'vue';
import { reactive, toRaw } from 'vue';
import request from '@/script/utils/request'; // 导入Axios实例

const visible = ref(false);
let resolveCallback;
let rejectCallback;


const pictureCaptchaImage = ref(null)
const pictureCaptchaTicket = reactive({
  key: '',
  code: ''
});
const generatePictureCptcha = async () => {
  const res = await request.get('/captcha/picture');
  pictureCaptchaTicket.key = res.data.key
  pictureCaptchaImage.value = 'data:image/png;base64,' + res.data.picture;
  console.log(toRaw(pictureCaptchaTicket))
}


const prompt = async () => {
  pictureCaptchaTicket.code = '';

  //请求验证码
  try {
    await generatePictureCptcha()
  } catch (res) {

  }




  return new Promise((resolve, reject) => {
    resolveCallback = resolve;
    rejectCallback = reject;
    visible.value = true;
  });
};

const handleOk = () => {
  resolveCallback(pictureCaptchaTicket);
  visible.value = false;
};

const handleCancel = () => {
  resolveCallback(null);
  visible.value = false;
};

defineExpose({
  prompt
});
</script>